<template>
  <div>
    <h1>toRef和toRefs的使用"</h1>
      <h1>{{state.myname}}</h1>
      <h1>{{age}}</h1>
      <h1>{{sex}}</h1>
      <hr>
      <h1>{{name}}</h1>
       <h1>{{price}}</h1>
       <h1>{{size}}</h1>
       <button @click="toChange">改变</button>
  </div>
</template>
<script setup>
  import {reactive,toRef,toRefs} from 'vue'
  let state=reactive({
    myname:"张景园",
    age:30,
    sex:"男",
    list:["张三","李四","王五"]
  })
  // toRef 方法  将reactive中的某个属性变成ref
  let age=toRef(state,"age") //ref对象
  // 和  let age=ref(30)
  let sex=toRef(state,"sex");

  // toRefs 方法  将reactive中的所有属性变成ref
  let pdata=reactive({
    name:"奔驰迈巴赫s680",
    price:1000000,
    size:[20,30,40]
  })
  let {name,price,size}=toRefs(pdata)
  
  let toChange=()=>{
    // 转换后的ref对象 需要加.value
    price.value=2456456456
  }
</script>